
import './index.scss'
import { useState } from 'react'
import PropTypes from 'prop-types'
import { Tooltip, Dropdown } from 'antd'
import { BgColorsOutlined, SwapOutlined, BuildOutlined, ClusterOutlined, BarsOutlined } from '@ant-design/icons'

import { DrawerBox } from '../../Model'
import { ThemeBackList } from '../../Config/themeList'

const { port } = window.location

// TODO 通用组件
export const AdminDiySet = ({ MenuEvent }) => {
    AdminDiySet.propTypes = { MenuEvent: PropTypes.object }
    const PortList = [
        {
            label: '主题设置', icon: <ClusterOutlined />, color: '#722ed1',
            click: () => MenuEvent.emit('09dfea31-a24e-46ca-80ff-9f3222fb3b4b')
        },
        {
            label: '后台首页', icon: <BuildOutlined />, color: '#722ed1',
            click: () => MenuEvent.emit('c269c743-5f6c-4b9d-b4fb-f04f967cc48a')
        },
        {
            label: '大屏配色', icon: <BgColorsOutlined />, color: '#722ed1',
            click: () => MenuEvent.emit('0e9bf4b7-3df3-42a8-a625-3e8a2c567ed1')
        },
        {
            label: '大屏路由', icon: <BarsOutlined />, color: '#722ed1',
            click: () => MenuEvent.emit('8684acd0-c315-406d-b092-ff4bf19b5ff4')
        },
        {
            label: '项目选择', icon: <SwapOutlined />, color: '#f5222d',
            click: () => window.location.href = `http://localhost:${port}`
        },
    ]
    if (port) {
        return (
            <div className='AdminDiySet'>
                {PortList.map(({ label, icon, color, click }, index) =>
                    <Tooltip key={index} placement="left" title={label} >
                        <div style={{ background: color }} onClick={click}>{icon}</div>
                    </Tooltip>
                )}
            </div>
        )
    }
}
// TODO 样式配置

export const A01 = () => {
    return (
        <div className='HOME_A01'>HOME_A01</div>
    )
}

export const A02 = ({ ThemeSet }) => {
    A02.propTypes = { ThemeSet: PropTypes.object }

    const { backType, backData, blurState, blurColor, blurFilter } = ThemeSet

    const [OptionsCall, setOptionsCall] = useState()
    const setTheme = () => setOptionsCall({ type: 'Theme', title: '主题设置', close: true, data: {} })
    const setLOGO = () => setOptionsCall({ type: 'ThemeLogo', title: '标题设置', close: true, data: {} })
    const setMENU = () => setOptionsCall({ type: 'ThemeMenu', title: '菜单设置', close: true, data: {} })
    const setREST = () => setOptionsCall({ type: 'ThemeRest', title: '操作设置', close: true, data: {} })
    const setUSER = () => setOptionsCall({ type: 'ThemeUser', title: '用户设置', close: true, data: {} })
    const setPAGE = () => setOptionsCall({ type: 'ThemePage', title: '页面设置', close: true, data: {} })

    const items = [
        { key: 1, label: <div type='link' onClick={setTheme}>主题设置</div> },
        { key: 2, label: <div type='link' onClick={setLOGO}>标题设置</div> },
        { key: 3, label: <div type='link' onClick={setMENU}>菜单设置</div> },
        { key: 4, label: <div type='link' onClick={setREST}>操作设置</div> },
        { key: 5, label: <div type='link' onClick={setUSER}>用户设置</div> },
        { key: 6, label: <div type='link' onClick={setPAGE}>页面设置</div> },
    ]

    const Back = () => {
        const backTypes = {
            image: (src) => <img className='ImageBack' src={src} alt="" />,
            color: (color) => <div className='ColorBack' style={{ '--Back': color }} />,
            patter: (data) => {
                const [name, ...A] = data.split(',')
                const style = Object.fromEntries(A.map((value, index) => [`--A0${index + 1}`, value]))
                return (<div className={`PatterBack ${name}`} style={style} />)
            }
        }
        return (
            <div className='Back'>
                {blurState && <div className='mask' style={{ '--Color': blurColor, '--Filter': blurFilter }} />}
                {backTypes[backType]?.(backType === 'image' ? ThemeBackList[backData] : backData)}
            </div>
        )
    }


    return (
        <>
            <Dropdown menu={{ items }} trigger={['contextMenu']} >
                <div className='HOME_A02' >
                    <Back />
                    <div className='HOME_A02_Left'>
                        <div className='HOME_A02_LOGO' onClick={setLOGO}>logo</div>
                        <div className='HOME_A02_MENU' onClick={setMENU}>menu</div>
                    </div>
                    <div className='HOME_A02_Right'>
                        <div>
                            <div className='HOME_A02_REST' onClick={setREST}>rest</div>
                            <div className='HOME_A02_USER' onClick={setUSER}>user</div>
                        </div>
                        <div className='HOME_A02_PAGE' onClick={setPAGE}>page</div>
                    </div>
                </div>
            </Dropdown>
            <DrawerBox OptionsCall={OptionsCall} />
        </>
    )
}

// TODO 样式模型
export const ModelHomeA01 = () => {
    return (
        <div>样式1</div>
    )
}
export const ModelHomeA02 = () => {
    return (
        <div className='ModelHomeA02 Box_Shadow__A01'>
            <div className='HOME_A02_Left'>
                <div className='HOME_A02_LOGO'>LOGO</div>
                <div className='HOME_A02_MENU'>MENU</div>
            </div>
            <div className='HOME_A02_Right'>
                <div>
                    <div className='HOME_A02_REST'>REST</div>
                    <div className='HOME_A02_USER'>USER</div>
                </div>
                <div className='HOME_A02_PAGE'>PAGE</div>
            </div>
        </div>
    )
}